دسته بندی ها
14:01 1398/10/19

آپلود همزمان چند فایل توسط جی کویری

مشخصات سوال کننده :
کاربر : rezamafakheri     امتیاز کاربر : 6     رتبه کاربر : 80
دسته بندی : Html Asp.net Core جی کوئری جاوا اسکریپت

به این سوال امتیاز بدهید    1
تعداد بازدید این سوال : 3848
هوش مصنوعی

پاسخ هوش مصنوعی

برای آپلود همزمان چند فایل با استفاده از جی کویری، می توانید از زیر استفاده کنید. در این مثال، فایل ها از دو input مختلف جمع آوری می شوند و به سرور ارسال می شوند.

تغییرات لازم برای کدهای HTML و JavaScript به صورت زیر است:

کد HTML:

<form asp-controller="Home" asp-action="Create" method="post" enctype="multipart/form-data">
    <div class="input-group input-group-sm mb-4">
        <div class="custom-file">
            <input asp-for="CardNationalImg" type="file" class="custom-file-input circleInput" id="cardNationalImg" multiple>
            <label class="custom-file-label" for="cardNationalImg" aria-describedby="cardNationalImg"> تصویر کارت ملی </label>
        </div>
        <div class="custom-file">
            <input asp-for="UserImage" type="file" class="custom-file-input circleInput" id="userImage" multiple>
            <label class="custom-file-label" for="userImage" aria-describedby="userImage"> تصویر کاربری </label>
        </div>
    </div>

    <input type="button" onclick="UploadImage()" id="btnupload" class="btn btn-info" value="آپلود و نمایش تصویر" />
</form>

کد JavaScript:

var UploadImage = function () {
    var data = new FormData();

    // جمع آوری فایل ها از input کارت ملی
    var cardFiles = $("#cardNationalImg").get(0).files;
    for (var i = 0; i < cardFiles.length; i++) {
        data.append('CardNationalImg', cardFiles[i]);
    }

    // جمع آوری فایل ها از input تصویر کاربری
    var userFiles = $("#userImage").get(0).files;
    for (var j = 0; j < userFiles.length; j++) {
        data.append('UserImage', userFiles[j]);
    }

    $.ajax({
        type: "post",
        url: '@Url.Action("UploadFile","Home")',
        data: data,
        contentType: false,
        processData: false,
    }).done(function (result) {
        if (result.status == "success") {
            $("#imguser").attr('src', "\\img\\userimage\\normalimage\\" + result.imagename);
            $("#divmessage").removeClass('hidden');
            $("#divmessage").text("تصویر با موفقیت آپلود شد");
            $("#imagename").val(result.imagename);
        }
    }).fail(function (result) {
        if (result.status != "success") {
            $("#divmessage").removeClass('hidden');
            $("#divmessage").text("در هنگام آپلود مشکلی رخ داد");
        }
    });
}

با این تغییرات، فایل های چندگانه از هر input به سرور ارسال خواهند شد و شما می توانید آنها را به ترتیب در مسیرهای مورد نظر ذخیره کنید.

به این پاسخ امتیاز بدهید    0
امتیاز: - رتبه: -
پاسخ دهنده : fateme 16:59 1398/10/19

بهتره برای هر عکس یک دکمه آپلود قرار بدید. یعنی توابع جی کوئری رو برای آپلود 2 بار بنویسید. یکبار برای آپلود عکس کاربر یک بار هم برای آپلود عکس کارت ملی.

توی اکثر سایتها هم اگر نگاه کنید برای هر فایل یا عکسی که قرار آپلود بشه یک دکمه جداگانه قرار دادن.

به این پاسخ امتیاز بدهید    1
امتیاز: 1635 رتبه: 2
پاسخ دهنده : AliNoori 19:00 1398/10/19

با سلام

این لینک خیلی بهت کمک میکنه میتونی با کمی تغییر جزیی کاملا ازش استفاده کنی .

به این پاسخ امتیاز بدهید    2
امتیاز: 136 رتبه: 11
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.   ورود